import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import { getOneOrder } from '../apis/ordersApi'
import '../assets/css/order-detail.scss'
import { Button } from 'antd'

class OrderDetail extends Component {
    state = {
        order: {
            carId: {},
            ownerId: {},
            userId: {}
        },
    }
    componentDidMount() {
        this.getOrderInfo();
    }
    getOrderInfo = async () => {
        try {
            const id = this.props.location.search.split("?")[1].split("=")[1];
            const data = await getOneOrder(id);
            this.setState({ order: data });
            console.log("data", data);
        } catch (error) {
            console.log("err", error);
        }

    }
    //跳转到list
    goToOrderList = () => {
        this.props.history.replace("/main/ordersList")
    }
    render() {
        const { order } = this.state;
        return (
            <div className="order-box">
                <div className="order-detail-title">
                    <h1>订单详情</h1>
                </div>
                <div className="order-detail">
                    <h3>
                        <strong>订单编号：</strong><span>{order._id}</span>
                        <strong className="mg-left">订单状态：</strong><span style={{ color: 'green', fontWeight: 600 }}>{order.status}</span>
                    </h3>
                    <p>
                        <strong>下单时间：</strong><span>{order.time}</span>
                    </p>
                </div>
                <div className="detail-relative">
                    <p className="title">订单相关信息</p>
                    <div className="detail-info">
                        <div>
                            <p><strong>交易开始时间：</strong><span>{order.startTime}</span></p>
                            <p ><strong>交易结束时间：</strong><span>{order.endTime}</span></p>
                        </div>
                        <div>
                            <p>
                                <strong>汽车品牌型号：</strong><span>{order.carId.brand}</span>
                                <strong className="mg-left">车牌号：</strong><span>{order.carId.number}</span>
                            </p>
                        </div>
                        <div>
                            <p>
                                <strong>车主： </strong><span>{order.ownerId.name}</span>
                                <strong className="mg-left">取车地址： </strong><span>{order.ownerId.address}</span>
                            </p>
                            <p>
                                <strong>联系电话：</strong><span>{order.ownerId.username}</span>
                            </p>
                        </div>
                        <div>
                            <p>
                                <strong>用户：</strong><span>{order.userId.name}</span>
                                <strong className="mg-left">身份证号码：</strong><span>{order.userId.idCard}</span>
                            </p>
                            <p>
                                <strong>联系电话： </strong><span>{order.userId.username}</span>
                            </p>
                        </div>
                        <div>
                            <p className="detail-money">
                                <strong>耗费金额: <b style={{ color: "#f10000", fontWeight: 600, fontSize: "18px", }}>{order.money}</b>元</strong>
                            </p>
                        </div>
                    </div>
                </div>
                <Button type="primary" onClick={() => { this.goToOrderList() }}>返回列表</Button>
            </div>
        )
    }
}
export default withRouter(OrderDetail)